<template>
  <view class="free-wrapper">
    <view class="free-money">是否将剩余押金（{{ props.availableDepositAmount }}元）全部解冻</view>
    <ve-card style="margin-top: 24rpx">
      <ve-form-item label="备注" labelPosition="top" :borderBottom="false">
        <ve-input type="textarea" v-model="form.remark" placeholder="请输入备注说明" :maxlength="200" />
      </ve-form-item>
    </ve-card>
    <ve-bottom-box size="mini">
      <ve-button type="primary" size="long" :loading="okLoading" @click="handleSave">确认</ve-button>
    </ve-bottom-box>
  </view>
</template>
<script setup>
  import { ref } from 'vue'
  import { thawDeposit } from '@/api/order/sOrder'

  const form = ref({
    remark: '',
  })
  const props = defineProps({
    id: {
      type: [String, Number],
    },
    availableDepositAmount: {
      type: Number,
    },
  })
  const okLoading = ref(false)
  const handleSave = () => {
    okLoading.value = true
    thawDeposit({
      // 押金主键id
      id: props.id,
      remark: form.value.remark,
    })
      .then((res) => {
        uni.navigateBack()
        okLoading.value = false
      })
      .catch((error) => {
        okLoading.value = false
      })
  }
</script>
<style lang="less" scoped>
  .free-wrapper {
    background: #f7f8fa;
    height: 100%;
    padding: 48rpx 24rpx;
  }
  .free-money {
    font-size: 30rpx;
    color: #1890ff;
    line-height: 42rpx;
    text-align: center;
  }
</style>
